<template>
    <el-row justify="space-between">

        <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24" class="el-wrap">
            <el-skeleton class="skeleton-wrap" :rows="7" animated :loading="chartsLoading">
                <el-card>
                    <PieChart />
                </el-card>
            </el-skeleton>
        </el-col>
        <el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24" class="el-wrap el-wrap2">
            <el-skeleton class="skeleton-wrap" :rows="7" animated :loading="chartsLoading">
                <el-card>
                    <barChart />
                </el-card>
            </el-skeleton>
        </el-col>
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
            <el-skeleton class="skeleton-wrap" :rows="7" animated :loading="chartsLoading">
                <el-card>
                    <LineChart />
                </el-card>
            </el-skeleton>
        </el-col>
    </el-row>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import PieChart from './components/PieChart.vue'
import barChart from './components/barChart.vue'
import LineChart from './components/LineChart.vue'
let chartsLoading = ref(true)

onMounted(() => {
    setTimeout(() => {
        chartsLoading.value = false
    }, 500)
})
</script>
<style scoped>
.el-wrap {
    margin-bottom: 20px;
    padding-right: 10px;
}

.el-wrap2 {
    padding-left: 10px;
}

.skeleton-wrap {
    height: 340px;
    background-color: #fff;
    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
}
</style>